<template>
	<div class="commentWebsite">
		<el-card shadow="hover">
			<div class="comment-goods mb15">
				<el-form ref="formDataRef" :inline="true" :model="searchForm" label-width="80px" class="demo-form-inline">
					<el-row>
						<el-col :span="24">
							<el-form-item>
								<div style="padding-left: 25px">
									<el-button type="success" @click="toAdd">新增评价模板</el-button>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="关键词" prop="keyword" style="width: 100%">
								<el-input maxlength="200" v-model="searchForm.keyword" placeholder="关键词" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="模板" prop="options" style="width: 100%">
								<el-select v-model="searchForm.options" placeholder="选择模板" style="width: 100%">
									<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="评价人" prop="email" style="width: 100%">
								<el-input maxlength="200" v-model="searchForm.email" placeholder="评价人" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="评价时间" prop="commentStartTime" style="width: 100%">
								<DatePicker v-model:start="searchForm.commentStartTime" v-model:end="searchForm.commentEndTime" />
							</el-form-item>
							<el-form-item prop="commentEndTime"></el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item>
								<div style="padding-left: 25px">
									<el-button type="primary" @click="init">搜索</el-button>
									<el-button @click="resetForm">重置</el-button>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<el-table :data="tableData" style="width: 100%" v-loading="loading">
				<el-table-column type="index" label="序号" width="60">
					<template #default="scope">
						<span>{{ (page.current - 1) * 10 + scope.$index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="email" label="评价人邮箱" show-overflow-tooltip />
				<el-table-column prop="productName" label="评价人" show-overflow-tooltip />
				<el-table-column prop="productId" label="模板" show-overflow-tooltip />
				<el-table-column prop="createTime" label="评价时间" show-overflow-tooltip />
				<el-table-column fixed="right" label="操作" width="90px">
					<template #default="scope">
						<el-button text type="primary" @click="toDetail(scope.row)">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current-page="page.current"
				background
				v-model:page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="page.total"
			>
			</el-pagination>
		</el-card>
		<el-dialog v-model="addDialogVisible" :title="title" width="800px">
			<el-descriptions :column="1">
				<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
				<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
				<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
				<el-descriptions-item label="Remarks">School</el-descriptions-item>
				<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
			</el-descriptions>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="addDialogVisible = false">关 闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
import { useInit, useAdd } from './hook';
import DatePicker from '/@/components/common/datePicker/DatePicker.vue';

const { init, page, searchForm, loading, tableData } = useInit();
const { addDialogVisible, title, toAdd, toDetail } = useAdd(init);
const formDataRef = ref();
const options = [
	{
		value: -1,
		label: '全部',
	},
	{
		value: 'Option1',
		label: 'Option1',
	},
	{
		value: 'Option2',
		label: 'Option2',
	},
];

const resetForm = () => {
	formDataRef.value.resetFields();
};

const onHandleSizeChange = (val) => {
	page.value.pageSize = val;
	init();
};
const onHandleCurrentChange = (val) => {
	page.value.current = val;
	init();
};
</script>
<style lang="scss" scoped>
.commentLikeStart {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.el-input-number {
		width: 100%;
	}
}
</style>
